(function ($) {

    //сквозной ойди
    var counter = 0;

    // модель виджета Текст
    var TxtWidgetModel = Backbone.Model.extend({
        defaults:{
            textInside: 'Default text'
        }
    });

    var txtWidgetModel = new TxtWidgetModel();

    //вьюха виджета Текст
    var TxtWidgetView = Backbone.View.extend({
        className: 'txt-widget-wrap',
        render: function(){
            var htmlTW = '<div class="txt-widget-class"><h4>' + this.model.get('textInside') + '</h4></div><h5>Drag me</h5>';
            $(this.el).html(htmlTW);
            $(this.el).draggable({ handle: "h5" }, { grid: [ 25,25 ] }, { containment: "#change-content", scroll: false });
            $(this.el).attr('id', 'txt-widget-wrap-id' + counter + '');
            $(this.el).children('.txt-widget-class').attr('contenteditable', 'true');
            $(this.el).children('.txt-widget-class').attr('id', 'txt-widget-id' + counter + '');
        }
    });

    var txtWidgetView = new TxtWidgetView({model: txtWidgetModel});

    //вьюха области конструктора
    var BuilderAreaView = Backbone.View.extend({
        el: '#content',
        events: {
            'click #add-txt-widget': 'addTxtWidget',
            'click #add-img-widget': 'addImgWidget',
            'click #add-btn-widget': 'addBtnWidget',
            'click #add-html-widget': 'addHtmlWidget'
        },
        addTxtWidget: function(){
            counter++;
            txtWidgetView.render();
            console.log(txtWidgetView.el);
            $('#change-content').append(txtWidgetView.el);
        },
        addImgWidget: function(){
            counter++;
            alert('Image Widget was added' + ' with id="' + counter + '"');
        },
        addBtnWidget: function(){
            counter++;
            alert('Button Widget was added' + ' with id="' + counter + '"');
        },
        addHtmlWidget: function(){
            counter++;
            alert('HTML Widget was added' + ' with id="' + counter + '"');
        }
    });

    var builderAreaView = new BuilderAreaView();

})(jQuery);
